<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>组件组合使用</title>
    </head>
    <body>
        <!--引入react核心库-->
        <script type="text/javascript" src="../js/react.development.js"></script>
        <!--引入操作react操作DOM库-->
        <script type="text/javascript" src="../js/react-dom.development.js"></script>
        <!--引入babel-->
        <script type="text/javascript" src="../js/babel.min.js"></script>
        <!--引入传参限制库-->
        <script type="text/javascript" src="../js/prop-types.js"></script>
        <script type="text/babel">
          class App extends React.Component{
              state = {todos:['eat','sleep','play']}
              addTodos = (userInput)=>{
                  let todos = [...this.state.todos]
                  todos.unshift(userInput)
                  this.setState({todos})
              }

              render() {
                  return (
                      <div>
                          <h2>Simple TODO List</h2>
                          <Add count={this.state.todos.length} addTodos={this.addTodos()}/>
                          <list todos={this.state.todos}/>
                      </div>
                  );
              }
          }
        </script>
    </body>
</html>